<template>
  <el-dialog
    v-if="load"
    title="申报要素维护项"
    v-model="visible"
    align-center
    width="1200"
    :z-index="2000"
  >
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <el-input
          v-model.trim="form.project_name"
          class="w-40"
          placeholder="申报要素名称"
          clearable
        ></el-input>
        <el-input
          v-model.trim="form.remark"
          class="w-40"
          placeholder="备注"
          clearable
        ></el-input>
      </template>
      <template #toolbar_btns>
        <VButton
          auth="/goods/basics/customs-number/add"
          type="primary"
          @click="handleComModal('add')"
          ><svg-icon icon-class="add_new" />新增</VButton
        >
        <VButton
          auth="/goods/basics/customs-number/delete"
          :loading="loadings.del"
          @click="handleDelete"
          ><svg-icon class="mr-1 text-red-500" icon-class="del" />删除</VButton
        >
      </template>
    </VTable>
    <template #footer>
      <el-button @click="close">关闭</el-button>
    </template>
  </el-dialog>
  <ComModal ref="ComModalRef" @query="query"></ComModal>
</template>

<script lang="jsx" setup>
import { queryDeclareElementList, deleteDeclareElement } from "../../api";
import { ElMessage, ElMessageBox } from "element-plus";
import ComModal from "./ComModal.vue";
const load = ref(false);
const visible = ref(false);
const tableRef = ref();
let loadings = reactive({});

const emit = defineEmits(["close"]);

// 打开弹窗
const open = async (val) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  loadings = reactive({});
  visible.value = true;
};
// 关闭弹窗
const close = () => {
  visible.value = false;
};
const handleClose = () => {
  emit("close");
};
const tableOptins = reactive({
  formConfig: {
    data: {},
  },
  height: 500,
  rowConfig: {
    height: 60,
  },
  columns: [
    { type: "checkbox", width: 50 },
    { field: "id", title: "ID", width: 60 },
    {
      title: "申报要素名称",
      field: "project_name",
    },
    { field: "project_value", title: "维护格式" },
    { field: "remark", title: "备注" },
    { field: "created_user_text", title: "创建人" },
    { field: "created_at", title: "创建时间" },
    { field: "updated_user_text", title: "最近更新人" },
    { field: "updated_at", title: "更新时间" },
    {
      title: "操作",
      fixed: "right",
      width: 80,
      slots: {
        default: ({ row }) => {
          return (
            <div class="flex justify-start">
              <VButton
                auth="/goods/basics/customs-number/edit"
                type="primary"
                link
                class="mr-2"
                onClick={() => handleComModal("edit", row)}
              >
                编辑
              </VButton>
            </div>
          );
        },
      },
    },
  ],
  proxyConfig: {
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: async ({ page, form }) => {
        const res = await queryDeclareElementList({ ...form, ...page });
        return new Promise(function (resolve) {
          resolve({
            data: res.data,
            total: res.total,
          });
        });
      },
    },
  },
});
//获取已选中的行
const getSelectRow = () => {
  return tableRef?.value.$table.getCheckboxRecords();
};

const ComModalRef = ref();
const handleComModal = (type, row) => {
  nextTick(() => {
    ComModalRef.value.open(type, row);
  });
};

const handleDelete = () => {
  if (!isHandle()) return;
  const records = getSelectRow().map((i) => i.id);
  ElMessageBox.confirm("此操作将永久删除该项, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    confirmButtonClass: "btnFalses",
  }).then(() => {
    loadings.del = true;
    deleteDeclareElement({ id: records })
      .then((res) => {
        query();
        ElMessage.success(res.message);
      })
      .finally(() => {
        loadings.del = false;
      });
  });
};

const isHandle = () => {
  const records = getSelectRow();
  return !records.length ? ElMessage.error("请先选择行!") && false : true;
};

const query = () => {
  tableRef?.value.query();
};

defineExpose({ open });
</script>
